<template>
  <div class="home">
    <!-- 头部 -->
    <handers></handers>
    <div class="context">
      <!-- 左侧 -->
      <left-earch class="left"></left-earch>
      <!-- 中 -->
      <cont-earch class="cont"></cont-earch>
      <!-- 右 -->
      <right-earch class="right"></right-earch>
    </div>
  </div>
</template>

<script setup>
import handers from '../components/handers.vue'
import leftEarch from '../components/leftEarch.vue'
import contEarch from '../components/contEarch.vue'
import rightEarch from '../components/rightEarch.vue'
// import $ from 'jquery'

// let fn = new Promise((resolve, reject) => {
//   //2.jquery中ajax也封装好了jsonp-缺点：1.只能用get方法请求,不能用post 2.还得后台配合你写回调参数
//   $.ajax({
//     url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign',
//     dataType: "jsonp",
//     // jsonp: "callback",//传给后端用来获取jsonp回调函数名的参数名，一般默认是callback。不写也可以
//     // jsonpCallback:"cb",//也可跟后端约定函数名
//     success(res) {
//       console.log('ajax数据', res);
//       let datalist = JSON.parse(res.data);
//       console.log(datalist);
//       let left1 = datalist.countryAddConfirmRankList
//       let left2 = datalist.continentStatis
//       let left3 = datalist.foreignList
//       let right1 = datalist.globalDailyHistory
//       let right2 = datalist.countryConfirmWeekCompareRankList
//       let right3 = datalist.importStatis
//       let cont1 = datalist.globalStatis
//       resolve({ left1, left2, left3, right1, right2, right3, cont1 })
//     }
//   })
// })



components: { handers, leftEarch, contEarch, rightEarch }
</script>
<style lang="scss" scoped>
.home {
  height: 1200px;
  width: 100%;
  background: url(../assets/bg.a6333996.jpg) center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.context {
  width: 100%;
  height: calc(100vh - 100px);
  display: flex;
  color: #fff;
  text-align: center;

  .left {
    width: 520px;
  }

  .cont {
    flex: 1;
  }

  .right {
    width: 520px;
  }
}
</style>
